/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/


/*=============== BASE ===============*/





img {
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section {
  padding: 4.5rem 0 2rem;
}

.section__title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  text-align: center;
  margin-bottom: 1.5rem;
}


/*=============== LAYOUT ===============*/
.container {

  margin-left: 1rem;
  margin-right: 1rem;
}

/*=============== HEADER ===============*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--container-color);
  z-index: var(--z-fixed);
  transition: .4s;
  display: none;
}

/*=============== NAV ===============*/
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__img {
  width: 32px;
  border-radius: 50%;
}

.nav__logo {
  color: var(--title-color);
  font-weight: 600;
}


.nav__list, 
.nav__link {
  display: flex;
}

.nav__link {
  flex-direction: column;
  align-items: center;
  row-gap: 4px;
  color: var(--title-color);
  font-weight: 600;
}

.nav__list {
  padding: 10px;
  margin: 10px;
  margin-top: 20px;
}

.nav__name {
  font-size:xx-large;
 
  /* display: none;*/ /* Minimalist design, hidden labels */
}

.nav__icon {
  font-size: 2.5rem;
  position: -webkit-sticky;
}

/*Active link*/
.active-link {
  position: relative;
  color: var(--first-color);
  transition: .3s;
}

/* Minimalist design, active link */
/* .active-link::before{
  content: '';
  position: absolute;
  bottom: -.5rem;
  width: 4px;
  height: 4px;
  background-color: var(--first-color);
  border-radius: 50%;
} */

/* Change background header */
.scroll-header {
  box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
}

/*=============== MEDIA QUERIES ===============*/
/* For small devices */
/* Remove if you choose, the minimalist design */

/* For large devices */
@media screen and (min-width: 1024px)
 {

  .container {
    margin-left: auto;
    margin-right: auto;
    
  }
   .nav__list{
    display:none
  }
}
.footer{
	background:#1b032f;
	padding-top:50px;
}
.content{
	margin:auto;
	display:flex;
	justify-content:center;
	color:white;
}
.footer-content1{
        width: 33.3%;
    }
    h3{
        font-size: 28px;
        margin-bottom:15px;
        text-align: center;
		     color:white;
    }
    .footer-content1 p{
        width:190px;
        margin: auto;
        padding: 7px;
    }
    .footer-content1 ul{
        text-align: center;
    }
    .list{
        padding: 0;
    }
    .list li{
        width: auto;
        text-align: center;
        list-style-type:none;
        padding: 7px;
        position: relative;
    }
    
    .list li::before{
        content: '';
        position: absolute;
        transform: translate(-50%,-50%);
        left: 50%;
        top: 100%;
        width: 0;
        height: 2px;
        background:#5AAC4E; ;
        transition-duration: .5s;
    }

    .list li:hover::before{
        width: 70px;
    }
    .social-icons1{
        text-align: center;
        padding: 0;
    }
    .social-icons1 li{
        display: inline-block;
        text-align: center;
        padding: 5px;
    }
    .social-icons1 i{
        color: bl;
        font-size: 27px;
    }
    a{  font-size:15px;
        text-decoration: none;
    }
    a:hover{
        color:  #5AAC4E;
    }
    .social-icons1 i:hover{
        color: #5AAC4E;
    }
    .bottom-bar{
        background: #5AAC4E;
        text-align: center;
        padding: 10px 0;
     
    }
   .bottom-bar p{
        color: white;
        margin: 0;
        font-size: 16px;
        padding: 7px;
    }